<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css?v=100" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201219"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>


    <style>
        .el-form-item__label {
            color: white;
        }
    </style>

</head>
<body>

<div id="app" v-cloak class="clinbrain-container steps-background physical-information"
     v-loading.fullscreen.lock="loading" element-loading-text="正在加载数据..." element-loading-background="transparent">
    <div class="header" style="height:48px;">
        <el-form size="mini" :inline="true" style="background-color:rgb(58, 65, 95);height:48px;">

            <el-form-item label="日期：" style="margin-left:10px;">
                <el-date-picker type="daterange" v-model="requestModel.dates" style="margin-top:10px;"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="诊断：">
                <el-input v-model="requestModel.Content" size="mini" style="width:150px;margin-top:10px;"></el-input>
            </el-form-item>


            <el-form-item>
                <i class="el-icon-search clinbrain-i-search"
                   style="margin-top:18px;color:white;background-color:transparent;" v-on:click="search"></i>
            </el-form-item>
        </el-form>
    </div>
    <div class="steps-container">
        <i class="el-icon-arrow-left" v-on:click="changeTimeAxisPage(-1)"></i>
        <div class="clinbrain-steps">
            <div></div>
            <div>
                <div v-for="(item,index) in timeAxis" v-on:click="getData(item)"
                     :class="item==activeTimeAxis?'clinbrain-step is-active':'clinbrain-step'">
                    <div class="header" :title="item.diagname">{{item.diagname}}</div>
                    <div class="circular"></div>
                    <div class="footer" :title="item.inhospitaldate">{{item.inhospitaldate}}</div>
                </div>
            </div>
        </div>
        <i class="el-icon-arrow-right" v-on:click="changeTimeAxisPage(1)"></i>
    </div>
    <div class="physical-information-table">
        <div class="com-not-data" v-if="isNotData">
            暂无数据
        </div>
        <div class="scrollbar-tree" v-if="isNotData==false">
            <table class="container-table">
                <tbody>
                <tr>
                    <td colspan="8">
                        <div class="header">
                            <div class="left"><span>体征信息</span></div>
                            <div class="left">
                                <span>{{dateInfo.current.min|formatDate('yyyy年MM月dd日')}}-{{dateInfo.current.max|formatDate('MM月dd日')}}</span>
                            </div>
                            <div class="right">
                                <i class="el-icon-arrow-left" v-on:click="changeDate(-1)"></i><i
                                    class="el-icon-arrow-right"
                                    v-on:click="changeDate(1)"></i>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="100">住院日期</td>
                    <td v-for="(item,index) in titleDate">{{item.date|formatDate('yyyy-MM-dd')}}</td>
                </tr>
                <tr>
                    <td>住院天数</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'DayNum')}}</td>
                </tr>
                <tr>
                    <td>术后日数</td>
                    <td v-for="(item,index) in titleDate">{{item.operationDay}}</td>
                </tr>
                <tr>
                    <td>时间</td>
                    <td v-for="(item,index) in titleDate">
                        <span class="red">{{HospitalConfig.Name=='BinZhou'?3:4}}</span><span>{{HospitalConfig.Name=='BinZhou'?7:8}}</span><span>{{HospitalConfig.Name=='BinZhou'?11:12}}</span><span>{{HospitalConfig.Name=='BinZhou'?15:16}}</span><span
                            class="red">{{HospitalConfig.Name=='BinZhou'?19:20}}</span><span class="red">{{HospitalConfig.Name=='BinZhou'?23:24}}</span>
                        <div class="clear"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="8">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <rect width="100" height="90" rx="5" ry="5" x="725" y="10" class="legend"/>
                            <rect width="15" height="15" x="732" y="18" class="breathe-line-fill"/>
                            <polygon points="740.5,48 748,63 733,63" class="pulse-line-fill"></polygon>
                            <circle cx="740" cy="85" r="10" class="temperature-line-fill"/>
                            <text x="760" y="30">呼吸</text>
                            <text x="760" y="60">脉搏</text>
                            <text x="760" y="90">温度</text>

                            <polyline :points="breatheLine" class="breathe-line-stroke"/>
                            <polyline :points="pulseLine" class="pulse-line-stroke"/>
                            <polyline :points="temperatureLine" class="temperature-line-stroke"/>

                            <line :x1="selectedSvg.x1" :y1="selectedSvg.y1" :x2="selectedSvg.x2" :y2="selectedSvg.y2"
                                  style="stroke:#ea6c6c; stroke-width:1"/>

                            <rect width="8" height="8" v-for="(svgItem,svgIndex) in breatheCircle" :x="svgItem.cx-4"
                                  :y="svgItem.cy-4"
                                  v-on:mouseover="circleMouseover(svgItem,'breathe')" v-on:mouseout="circleMouseout()"
                                  class="breathe-circle"/>
                            <polygon v-for="(svgItem,svgIndex) in pulsePolygon" :points="svgItem.points"
                                     v-on:mouseover="circleMouseover(svgItem,'pulse')" v-on:mouseout="circleMouseout()"
                                     class="pulse-circle"/>
                            <circle class="circle temperature-circle" v-for="(svgItem,svgIndex) in temperatureCircle"
                                    :cx="svgItem.cx" :cy="svgItem.cy" r="6" v-on:click="circleClick(svgItem.data)"
                                    v-on:mouseover="circleMouseover(svgItem,'temperature')"
                                    v-on:mouseout="circleMouseout()"/>

                            <rect v-if="selectedSvg.cx>0||selectedSvg.cy>0" :x="getTooltipX(selectedSvg)"
                                  :y="selectedSvg.cy+1" width="150" height="80" rx="5" ry="5" class="totip"/>
                            <text v-if="selectedSvg.cx>0||selectedSvg.cy>0" :x="getTooltipX(selectedSvg)"
                                  :y="selectedSvg.cy+1">
                                <tspan :x="getTooltipX(selectedSvg)+5" :y="selectedSvg.cy+15">
                                    时间：{{selectedSvg.MeasureDatetime|formatDate('yyyy-MM-dd hh')}}
                                </tspan>
                                <tspan :x="getTooltipX(selectedSvg)+5" :y="selectedSvg.cy+35">
                                    呼吸：{{selectedSvg.Breathe}}
                                </tspan>
                                <tspan :x="getTooltipX(selectedSvg)+5" :y="selectedSvg.cy+55">脉搏：{{selectedSvg.Pulse}}
                                </tspan>
                                <tspan :x="getTooltipX(selectedSvg)+5" :y="selectedSvg.cy+75">
                                    温度：{{selectedSvg.Temperature}}
                                </tspan>
                            </text>
                        </svg>
                        <table class="chartsTable">
                            <tr>
                                <td rowspan="55">
                                    <div>50</div>
                                    <div>45</div>
                                    <div>40</div>
                                    <div>35</div>
                                    <div>30</div>
                                    <div>25</div>
                                    <div>20</div>
                                    <div>15</div>
                                    <div>呼吸</div>
                                </td>
                                <td rowspan="55">
                                    <div>180</div>
                                    <div>160</div>
                                    <div>140</div>
                                    <div>120</div>
                                    <div>100</div>
                                    <div>80</div>
                                    <div>60</div>
                                    <div>40</div>
                                    <div>脉搏</div>
                                </td>
                                <td rowspan="55">
                                    <div>42℃</div>
                                    <div>41℃</div>
                                    <div>40℃</div>
                                    <div>39℃</div>
                                    <div>38℃</div>
                                    <div>37℃</div>
                                    <div>36℃</div>
                                    <div>35℃</div>
                                    <div>温度</div>
                                </td>
                                <td v-for="(td,index) in drawing.chartsTd"></td>
                            </tr>
                            <tr v-for="(tr,index) in drawing.chartsTr">
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="8">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                            <polyline :points="tetongpLine" class="temperature-line-stroke"/>
                            <circle class="circle temperature-circle" v-for="(svgItem,svgIndex) in tetongpCircle"
                                    :cx="svgItem.cx" :cy="svgItem.cy" r="6"
                                    v-on:mouseover="tetongMouseover(svgItem)" v-on:mouseout="tetongMouseout()"/>
                            <rect v-if="selectedTetongSvg.cx>0||selectedTetongSvg.cy>0" :x="selectedTetongSvg.cx+1"
                                  :y="selectedTetongSvg.cy-20" width="150" height="40" rx="5" ry="5" class="totip"/>
                            <text v-if="selectedTetongSvg.cx>0||selectedTetongSvg.cy>0" :x="selectedTetongSvg.cx+1"
                                  :y="selectedTetongSvg.cy+1">
                                <tspan :x="selectedTetongSvg.cx+5" :y="selectedTetongSvg.cy-5">
                                    时间：{{selectedTetongSvg.MeasureDatetime|formatDate('yyyy-MM-dd hh')}}
                                </tspan>
                                <tspan :x="selectedTetongSvg.cx+5" :y="selectedTetongSvg.cy+15">
                                    疼痛：{{selectedTetongSvg.Tetongp}}
                                </tspan>
                            </text>
                        </svg>
                        <table class="pain-charts-table">
                            <tr>
                                <td rowspan="8">
                                    <div style="width:15px; margin:0 auto;">疼痛强度</div>
                                </td>
                                <td>10</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                            <tr>
                                <td>0</td>
                                <td v-for="(td,tdindex) in drawing.chartsTd"></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>大便(次)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'ShitCount')}}</td>
                </tr>
                <tr v-if="HospitalConfig.Name!='BinZhou'">
                    <td>小便(次)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'SmailCount')}}</td>
                </tr>
                <tr>
                    <td>{{HospitalConfig.Name=='BinZhou'?'总出量':'出水量'}}(ml)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'OutWater')}}</td>
                </tr>
                <tr>
                    <td>{{HospitalConfig.Name=='BinZhou'?'总入量':'入水量'}}(ml)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'InWater')}}</td>
                </tr>
                <tr>
                    <td>体重(kg)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'Weight')}}</td>
                </tr>
                <tr>
                    <td rowspan="2">血压(mmHg)</td>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'SBP')}}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in titleDate">{{item|getValue(result,'DBP')}}</td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return {
                requestModel: {
                    dates: [],
                    Content: ""
                },
                timeAxis: [],//当前显示时间轴数据
                timeAxisResult: [],//所有时间轴结果
                timeAxisPageSize: 8,//时间轴显示数量
                timeAxisCurrentNumber: 0,//时间轴当前显示下标
                activeTimeAxis: {},//选中时间轴
                dateInfo: {
                    max: new Date('2018-04-30'),
                    min: new Date('2018-04-02'),
                    current: {max: new Date('2018-04-08'), min: new Date('2018-04-02')}
                },
                pageInfo: {
                    pages: [],
                    current: 0
                },
                titleDate: [],
                drawing: {
                    chartsTr: [],
                    chartsTd: []
                },
                result: [],
                oriResult: [],
                currentResult: [],//当前页结果集
                breatheLine: null,//呼吸
                breatheCircle: [],//呼吸
                pulseLine: null,//脉搏
                pulseCircle: [],//脉搏
                pulsePolygon: [],//脉搏三角形
                temperatureLine: null,//温度
                temperatureCircle: [],//温度
                tetongpLine: null,//疼痛
                tetongpCircle: [],//疼痛
                selectedSvg: {MeasureDatetime: ""},//选中SVG
                selectedTetongSvg: {},//选中的疼痛SVG
                mouseoverData: {},
                mouseoverType: '',
                loading: false,
                isNotData: true,
                operationDates: [],
            }
        },
        methods: {
            search() {
                this.getTimeAxis();
            },
            getDate(index) {
                if (this.requestModel.dates && this.requestModel.dates.length >= index + 1) {
                    return this.requestModel.dates[index];
                }
                return null;
            },
            getTimeAxis() {
                var _this = this;
                this.loading = true;
                var param = {
                    patientId: clinBrain.getParam("patientId"),
                    OporIpVn: clinBrain.getParam("visitNumber"),
                    opOrIp: clinBrain.getParam("oporIp"), B1000: "",
                    Sdate: this.getDate(0), Edate: this.getDate(1),
                    Content: this.requestModel.Content,
                };
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.PersonalDiagnosis",
                        params: param
                    },
                    loading: true,
                    loadingText: "正在查询数据...",
                    success: function (resp) {
                        _this.loading = false;
                        resp.data.Data = resp.data.Data.map(item => {
                            return {
                                inhospitaldate: new Date(item.DxDate).format('yyyy-MM-dd'),
                                visitnumber: item.VisitNumber,
                                diagname: item.HosDxName,
                                patientid: item.PatientID
                            }
                        });
                        _this.timeAxisResult = resp.data.Data;
                        _this.timeAxisCurrentNumber = _this.timeAxisPageSize;
                        _this.timeAxis = _this.timeAxisResult.split(_this.timeAxisPageSize);
                        if (_this.timeAxis.length > 0)
                            _this.getData(_this.timeAxis[0]);
                    }
                }, this);
            },
            getTooltipX(item) {
                if (item.cx > 650) {
                    return item.cx - 151
                }
                return item.cx + 1
            },
            /**
             * 获取手术信息
             * */
            getOperation(visitNumber) {
                var _this = this;
                clinBrain.request({
                    url: "/comdata/basicselect",
                    params: clinBrain.toParamete({
                        PatientID: clinBrain.getParam('patientId'),
                        OporIpVn: clinBrain.getParam("visitNumber"),
                        VisitNumber: visitNumber
                    }).toParamete("PersonalQuery.GetOperationByDate").toParamete()
                }, this).success(function (resp) {
                    var dt = clinBrain.getDataTable(resp, "PersonalQuery.GetOperationByDate")
                    console.log(dt)
                    _this.operationDates = dt
                    if (dt.length != 0) {
                        _this.titleDate.forEach(function (n) {
                            n.operationDay = (_this.displayDate(n.date, dt))
                        })
                    }
                    _this.$forceUpdate()
                }, _this);
            },
            /**
             * 计算手术天数
             */
            displayDate(current, dates) {
                //if (dates.filter(n => new Date(n.date).format('yyyy-MM-dd') == new Date(current).format('yyyy-MM-dd')).length > 0) {
                //    return '手术'
                //}
                dates = dates.sort((a, b) => {
                    return new Date(a.date) - new Date(b.date)
                })
                var filterDates = dates.filter(n => new Date(n.date) < new Date(current))
                var text = ''
                if (filterDates.length > 0) {
                    filterDates.forEach(function (n) {
                        var currentDate = new Date(new Date(current).format('yyyy-MM-dd'))
                        var filterDate = new Date(new Date(n.date).format("yyyy-MM-dd"))
                        var total = Math.abs(currentDate - filterDate)
                        total = Math.floor(total / (24 * 3600 * 1000))
                        if (total <= 7) {
                            text = text ? text + '-' + total.toString() : total.toString()
                        }
                    })
                }
                return text;
            },
            getData(val) {
                var _this = this;
                this.activeTimeAxis = val;
                _this.clearData();
                if (val != null && val != undefined) {
                    this.loading = true;
                    clinBrain.request({
                        url: '/pms/query',
                        params: {
                            code: "com.base.api.cdr.PhysicalInformation",
                            params: {
                                patientId: clinBrain.getParam('patientId'),
                                visitNumber: '' + _this.activeTimeAxis.visitnumber
                            }
                        },
                        loading: true,
                        loadingText: "正在查询数据...",
                        success: function (resp) {
                            _this.loading = false;
                            resp.data.Data.sort((a, b) => {
                                return a.DayNum - b.DayNum
                            });
                            resp.data.Data.forEach(item => {
                                item.VitalsignDetail.sort((a, b) => {
                                    return a.MeasureDatetime > b.MeasureDatetime ? 1 : -1;
                                })
                            });
                            _this.result = resp.data.Data;
                            _this.isNotData = !resp.data.Data || resp.data.Data.length == 0;
                            _this.oriResult = _this.result;
                            if (!!!_this.result || _this.result.length == 0) return;
                            _this.analysis();
                            _this.setData()
                            if (HospitalConfig.Name == 'BinZhou') {
                                _this.getOperation(val.visitnumber)
                            }
                        }
                    }, this);
                } else
                    this.loading = false;
            },
            /**
             * 时间轴分页
             * method
             * param {int} val 上一页-1，下一页1
             */
            changeTimeAxisPage(val) {
                if (val == -1 && this.timeAxisCurrentNumber == this.timeAxisPageSize) {
                    this.$message({message: "已到最前端"});
                    return;
                }
                if (val == 1 && this.timeAxisCurrentNumber >= this.timeAxisResult.length) {
                    this.$message({message: "已到最末端"});
                    return;
                }
                this.timeAxisCurrentNumber += val;
                this.timeAxis = this.timeAxisResult.take(this.timeAxisCurrentNumber - this.timeAxisPageSize).split(this.timeAxisPageSize);
            },
            /**
             * 上一页、下一页
             * method
             * param {int} val 需要计算的页数
             */
            changeDate(val) {
                if ((this.pageInfo.current + val) < 0 || (this.pageInfo.current + val) == this.pageInfo.pages.length) {
                    this.$message({message: val > 0 ? "已最后一页" : "已第一页"});
                    return;
                }
                this.pageInfo.current += val
                this.dateInfo.current.min = this.pageInfo.pages[this.pageInfo.current].min;
                this.dateInfo.current.max = this.pageInfo.pages[this.pageInfo.current].max;
                this.setData();
            },
            /**
             * 解析数据
             * method
             * description 计算分页
             * */
            analysis() {
                this.dateInfo.min = new Date(this.result[0].MeasureDatetime);
                this.dateInfo.max = new Date(this.result[this.result.length - 1].MeasureDatetime);
                this.dateInfo.current.min = this.dateInfo.min;
                this.dateInfo.current.max = this.dateInfo.min.addDays(6)
                var maxDate = this.dateInfo.current.max;
                var minDate = this.dateInfo.current.min;
                this.pageInfo.current = 0;
                this.pageInfo.pages = [];
                this.pageInfo.pages.push({max: maxDate, min: minDate})

                //计算分页
                while (this.dateInfo.max != maxDate && this.dateInfo.max > maxDate) {
                    var newMaxDate = maxDate.addDays(6);
                    if (newMaxDate >= this.dateInfo.max) {
                        newMaxDate = this.dateInfo.max
                    }
                    var sum = newMaxDate - maxDate;
                    minDate = minDate.addDays(sum / 86400000)
                    maxDate = newMaxDate;
                    this.pageInfo.pages.push({max: maxDate, min: minDate})
                }
            },
            /**
             * 设置数据
             * method
             * */
            setData() {
                this.titleDate = [];
                this.currentResult = [];
                var minDate = this.dateInfo.current.min;
                while (minDate <= this.dateInfo.current.max) {
                    this.titleDate.push({date: minDate});
                    this.getDataModel(minDate)
                    minDate = minDate.addDays(1);
                }
                var _this = this;
                if (HospitalConfig.Name == 'BinZhou') {

                    if (_this.operationDates.length != 0) {
                        _this.titleDate.forEach(function (n) {
                            n.operationDay = (_this.displayDate(n.date, _this.operationDates))
                        })
                    }
                }
                _this.$forceUpdate()
                this.drawingLine()
            },
            /**
             *清除数据
             */
            clearData() {
                this.titleDate = [];
                this.currentResult = [];
                this.breatheCircle = [];
                this.breatheLine = null;

                this.pulseLine = null;
                this.pulseCircle = [];

                this.temperatureLine = null;
                this.temperatureCircle = [];
            },
            /**
             * 根据日期获取数据对象
             * method
             * param {Date} val 日期
             * */
            getDataModel(val) {
                var _this = this;
                this.result.forEach(function (o) {
                    if (new Date(o.MeasureDatetime).format("yyyy-MM-dd") == val.format("yyyy-MM-dd")) {
                        _this.currentResult.push(o)
                    }
                })
            },

            /**
             * 曲线点鼠标移入事件
             * method
             * param {JSON} data 体征信息数据
             * param {String} type 呼吸|脉搏|温度
             **/
            circleMouseover(data, type) {
                this.mouseoverData = data.data;
                this.mouseoverType = type;
                this.selectedSvg = {x1: data.cx, y1: 0, x2: data.cx, y2: 840, cx: data.cx, cy: data.cy};
                this.selectedSvg.MeasureDatetime = data.data.MeasureDatetime;
                var where = "new Date($.data.MeasureDatetime).format('yyyy-MM-dd hh')=='" + new Date(data.data.MeasureDatetime).format('yyyy-MM-dd hh') + "'";
                //呼吸
                var breathe = this.breatheCircle.first(where);
                this.selectedSvg.Breathe = breathe ? (Math.floor(parseFloat(breathe.data.Breathe) * 100) / 100) : "--";
                //脉搏
                var pulse = this.pulsePolygon.first(where);
                this.selectedSvg.Pulse = pulse ? (Math.floor(parseFloat(pulse.data.Pulse) * 100) / 100) : "--";
                //温度
                var temperature = this.temperatureCircle.first(where);
                this.selectedSvg.Temperature = temperature ? (Math.floor(parseFloat(temperature.data.Temperature) * 100) / 100) : "--";
            },
            /**
             * 疼痛鼠标移入事件
             * method
             * param {JSON} data 疼痛数据
             */
            tetongMouseover(data) {
                this.selectedTetongSvg = {MeasureDatetime: data.data.MeasureDatetime, cx: data.cx, cy: data.cy};
                this.selectedTetongSvg.Tetongp = data.data.Tetongp;
            },
            /**
             * 疼痛鼠标移开事件
             * method
             */
            tetongMouseout() {
                this.selectedTetongSvg = {cx: 0, cy: 0};
            },
            /**
             * 曲线点鼠标移出事件
             * method
             * */
            circleMouseout() {
                this.mouseoverData = {};
                this.mouseoverType = "";
                this.selectedSvg = {x1: 0, y1: 0, x2: 0, y2: 0, cx: 0, cy: 0}
            },
            /**
             * 表格绘图
             * method
             * */
            drawingTable() {
                for (var i = 0; i < 54; i++) {
                    this.drawing.chartsTr.push(i);
                }
                for (var i = 0; i < 42; i++) {
                    this.drawing.chartsTd.push(i);
                }
            },
            /**
             * 曲线绘图
             * method
             * */
            drawingLine() {
                this.breatheCircle = [];
                this.breatheLine = null;

                this.pulseLine = null;
                this.pulsePolygon = [];
                this.pulseCircle = [];

                this.temperatureLine = null;
                this.temperatureCircle = [];

                this.tetongpLine = null;
                this.tetongpCircle = [];

                var _this = this;
                this.currentResult.forEach(function (i) {
                    if (i.VitalsignDetail) {
                        i.VitalsignDetail.forEach(function (o) {
                            //呼吸
                            if (!!o.Breathe) {
                                var breatheItem = {
                                    cx: _this.getDay(new Date(i.MeasureDatetime)) * 120 + ((120 / 24) * new Date(o.MeasureDatetime).getHours()),
                                    cy: (840 - ((840 / 55) * parseFloat(o.Breathe == null ? '0' : o.Breathe))) * 1.05,
                                    data: o
                                }
                                _this.breatheCircle.push(breatheItem)
                                var spot = '{x},{y}'.format({x: breatheItem.cx, y: breatheItem.cy})
                                _this.breatheLine = _this.breatheLine == null ? spot : _this.breatheLine + " " + spot;
                            }
                            //脉搏
                            if (!!o.Pulse) {
                                var pulseItem = {
                                    cx: _this.getDay(new Date(i.MeasureDatetime)) * 120 + ((120 / 24) * new Date(o.MeasureDatetime).getHours()),
                                    cy: (840 - ((840 / 200) * parseFloat(o.Pulse == null ? '0' : o.Pulse))) * 0.95,
                                    data: o
                                }
                                _this.pulseCircle.push(pulseItem);
                                _this.pulsePolygon.push({
                                    points: "{x},{y} {cx},{cy} {rx},{ry}".format({
                                        x: pulseItem.cx,
                                        y: pulseItem.cy - 6,
                                        cx: pulseItem.cx + 6,
                                        cy: pulseItem.cy + 5,
                                        rx: pulseItem.cx - 6,
                                        ry: pulseItem.cy + 5
                                    }), data: pulseItem.data, cx: pulseItem.cx, cy: pulseItem.cy
                                });
                                var spot = '{x},{y}'.format({x: pulseItem.cx, y: pulseItem.cy})
                                _this.pulseLine = _this.pulseLine == null ? spot : _this.pulseLine + " " + spot;
                            }
                            //体温
                            if (!!o.Temperature) {
                                var temperatureItem = {
                                    cx: _this.getDay(new Date(i.MeasureDatetime)) * 120 + ((120 / 24) * new Date(o.MeasureDatetime).getHours()),
                                    data: o
                                }
                                if (parseFloat(o.Temperature) > 35) {
                                    temperatureItem.cy = (840 - (600 / 8) * (parseFloat(o.Temperature) - 35) - 240) * 1.07;
                                } else {
                                    temperatureItem.cy = 840 - (240 / 35) * parseFloat(o.Temperature);
                                }
                                _this.temperatureCircle.push(temperatureItem)
                                var spot = '{x},{y}'.format({x: temperatureItem.cx, y: temperatureItem.cy})
                                _this.temperatureLine = _this.temperatureLine == null ? spot : _this.temperatureLine + " " + spot;
                            }
                            //疼痛
                            if (!!o.Tetongp && parseFloat(o.Tetongp) <= 10 && parseFloat(o.Tetongp) >= 0) {
                                var tetongp = {
                                    cx: _this.getDay(new Date(i.MeasureDatetime)) * 120 + ((120 / 24) * new Date(o.MeasureDatetime).getHours()),
                                    data: o
                                }
                                tetongp.cy = 96 - (96 / 10) * parseFloat(o.Tetongp);
                                _this.tetongpCircle.push(tetongp);
                                var spot = '{x},{y}'.format({x: tetongp.cx, y: tetongp.cy})
                                _this.tetongpLine = _this.tetongpLine == null ? spot : _this.tetongpLine + " " + spot;
                            }
                        })
                    }
                })
            },
            /**
             * 曲线点鼠标点击事件
             * method
             * param {JSON} data 体征信息数据
             * */
            circleClick(data) {
                //alert(JSON.stringify(data))
            },
            /**
             * 获取第几天
             * method
             * param {Date} val 日期
             * */
            getDay(val) {
                var day = 0;
                var index = 0;
                this.titleDate.forEach(function (i) {
                    if (i.date.format('yyyy-MM-dd') == val.format('yyyy-MM-dd')) {
                        day = index
                    }
                    index++
                })
                return day
            }
        },
        filters: {
            /**
             * 日期格式化
             */
            formatDate(val, format) {
                return new Date(val).format(format);
            },
            getValue(val, dataList, itemType) {
                var item = null;
                dataList.forEach(function (i) {
                    if (new Date(i.MeasureDatetime).format("yyyy-MM-dd") == val.date.format("yyyy-MM-dd")) {
                        item = i[itemType];
                    }
                })
                if (!!!item || (HospitalConfig.Name == 'YanTai' && (itemType == 'SBP' || itemType == 'DBP'))) {
                    return item
                }
                if (!!!item || (HospitalConfig.Name == 'GXZL' && (itemType == 'SBP' || itemType == 'DBP' || itemType == 'Weight' || itemType == 'InWater' || itemType == 'OutWater' || itemType == 'ShitCount' || itemType == 'SmailCount'))) {
                    return item
                }
                return Math.floor(parseFloat(item) * 100) / 100;
            }
        },
        created: function () {
            this.drawingTable();
            this.getTimeAxis();
        }
    });
</script>
</html>


